<?php
/** 
 * @param $width
 * @param $height
 * @param $categories [ { icon: '1.jpg',
/*                        images: ['a.jpg', 'b.jpg', 'c.jpg']
/*                      },
/*                      { icon: '2.jpg'
/*                        images: ['d.jpg', 'e.jpg', 'f.jpg']
/*                      }
/*                    ];
 * @param $unique_id
 */
function ivqm_front($width, $height, $categories, $unique_id) {
return "
<script type=\"text/javascript\" src=\"plugins/ivqm/assets/jquery.js\"></script>
<link rel=\"stylesheet\" href=\"plugins/ivqm/assets/global.css\">
<script type=\"text/javascript\" src=\"plugins/ivqm/assets/jquery.easing.1.3.js\"></script>
<script type=\"text/javascript\" src=\"plugins/ivqm/assets/jquery.galleryview1.js\"></script>
<script type=\"text/javascript\" src=\"plugins/ivqm/assets/jquery.timers-1.1.2.js\"></script>
<script type=\"text/javascript\">
  $(document).ready(function(){
    var pwidth = " . $width . ";
    var pheight = " . $height . ";
    var uniqueId = " . $unique_id . ";
    var fwidth = (pwidth - 50) / 6;
    var fheight = pheight / 8;
    $('.panel_'+uniqueId+' img').css({'width': pwidth + 'px', 'height': (pheight * 3/4-18) + 'px'});
    $('.filmstrip_'+uniqueId+' img').css({'width': fwidth + 'px','height': fheight + 'px'});
    
    $('.icon_'+uniqueId).addClass('gallery_icon');
    $('.icon_'+uniqueId).css({'height': fheight + 'px','width': pwidth + 'px'});
    $('#photoout_'+uniqueId+'>div:gt(1)').css('display','none');
    $('#photo_'+uniqueId+'_1').galleryView({
      panel_width: pwidth,
      panel_height: pheight * 3/4-18,
      frame_width: fwidth,
      frame_height: fheight,
      unique: uniqueId,
      pre_nex_btn: true
    });

      $('.icon_'+uniqueId+' img').each(function(i){
         $(this).click(function(){
           var m = i+1;
           $('#photo_'+uniqueId+'_'+m).css('display','block');
           $('#photoout_'+uniqueId+'>div:gt(0)').not($('#photo_'+uniqueId+'_'+m)).css('display','none');
         });
        });
      $('.icon_'+uniqueId+' img:gt(0)').each(function(i){
        $(this).one('click',function(){
          $('#photo_'+uniqueId+'_'+(i+2)).galleryView({
			      panel_width: pwidth,
			      panel_height: pheight * 3/4-18,
			      frame_width: fwidth,
			      frame_height: fheight,
			      unique: uniqueId,
			      pre_nex_btn: true
			    });
        });
      });
    });
  </script>
  
<div id=\"photoout_$unique_id\">
  <script type=\"text/javascript\">
  var pwidth = " . $width . ";
  var pheight = " . $height . ";
  var uniqueId = " . $unique_id . ";
  var fwidth = (pwidth - 50) / 6;
  var fheight = pheight / 8;
  var uniqueId = " . $unique_id . ";
  var data = " . $categories . ";
  var div = document.createElement('div');
  div.className = 'icon_'+uniqueId;
  for(var i = 1;i <= data.length; i++){
    var idiv = document.createElement('div');
    var img = document.createElement('img');
    img.src = data[i-1].icon;
    img.style.width = fwidth + 'px';
    img.style.height = fheight + 'px';
    idiv.appendChild(img);
    div.appendChild(idiv);
  }
  document.getElementById('photoout_'+uniqueId).appendChild(div);

  for(var n = 1; n <= data.length; n++){
    var pdiv = document.createElement('div');
    pdiv.id = 'photo_'+uniqueId+'_'+n;
    var images = data[n-1].images;
    for(var i = 0; i < images.length; i++) {
      var div = document.createElement('div');
      div.className = 'panel_'+uniqueId;
      var img = document.createElement('img');
      img.src = images[i];
      div.appendChild(img);
      pdiv.appendChild(div);
    }
    
    var ul = document.createElement('ul');
    ul.className = 'filmstrip_'+uniqueId;
    for(var i = 0; i < images.length; i++) {
      var li = document.createElement('li');
      var img = document.createElement('img');
      img.src = images[i];
      li.appendChild(img);
      ul.appendChild(li);
      pdiv.appendChild(ul);
    }
    document.getElementById('photoout_'+uniqueId).appendChild(pdiv);
  }
  
  </script>
</div>";
}
?>